<template>
  <el-dialog
    :title="'抵押清单查询'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" 
     v-loading="submitLoading"  :element-loading-text="'正在提交'"
    ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="110px">

    <el-form-item label="登记中心" prop="djzx"   v-if="false"  >
      <el-select v-model="dataForm.djzx" placeholder="登记中心" style="width:100%">
          <el-option
            v-for="item in dataForm.bankList"
            :key="item.bankid"
            :label="item.bankname"
            :value="item.bankid">
          </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="地市" prop="seRegion">
      <el-select  @change="selectChanged" v-model="dataForm.seRegion" placeholder="区域" style="width:100%">
          <el-option
            v-for="item in dataForm.seRegionList"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="区县" prop="region">
      <el-select v-model="dataForm.region" placeholder="区县" style="width:100%">
          <el-option
            v-for="item in dataForm.regionList"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="不动产状态" prop="bdczt" >
      <el-select v-model="dataForm.bdczt" placeholder="不动产状态" style="width:100%">
          <el-option
            v-for="item in dataForm.bdcStatusList"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
      </el-select>
    </el-form-item>

      <el-form-item label="抵押权人机构"  prop="orgid" >

              <el-select
                    v-model="dataForm.orgid"
                    clearable
                    filterable
                    style="width:100%"
                    remote
                    placeholder="输入抵押权人代码或名称"
                    :remote-method="remoteMethod"
                    :loading="loading">
                    <el-option
                      v-for="item in list"
                      :key="item.branchid"
                      :label="item.branchname"
                      :value="item.branchid">
                    </el-option>
                  </el-select>

      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()"  :disabled="submitLoading" >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {





      return {
        visible: false,
        visible2: false,
        submitLoading: false,
        loading: false,

        width:660,
        height:270,
        list:[],
        dataForm: {
          bdczt: '',
          region: '',
          seRegion: '',
          value: '',
          regionList: [],
          seRegionList: [],
          bdcStatusList: [],
          orgid: '',
          djzx: '',
          bankList: []
        },
        dataRule: {

          region: [
            { required: true, message: '区县不能为空', trigger: 'blur' }
          ],
          seRegion: [
            { required: true, message: '地市不能为空', trigger: 'blur' }
          ],
          bdczt: [
            { required: true, message: '不动产状态不能为空', trigger: 'blur' }
          ],
          value: [
            { required: true, message: '机构不能为空', trigger: 'blur' }
          ]
          ,
          orgid: [
            { required: true, message: '抵押权人机构不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {

      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;

          this.$http({
            url: this.$http.adornUrl(`/sys/user/branch/search`),
            method: 'get',
            params: this.$http.adornParams({
              "key": query
            })
          }).then(({data}) => {
            this.loading = false;
            if (data && data.code === 0) {
                this.list = data.list;
            }
          })     
          
        } else {
          this.list = [];
        }
      },

      init (id) {
        this.dataForm.id = id || 0
        this.visible = true

        this.$http({
          url: this.$http.adornUrl(`/bdc/bdcrealtylist/item/list`),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.seRegionList = data.regionList
              this.dataForm.bdcStatusList = data.bdcStatusList
              this.dataForm.value = data.orgid
              this.dataForm.orgid = data.orgid
              this.dataForm.bankList = data.bankList
            }
        })

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })

      },

      selectChanged(value){
          this.dataForm.region = '';
          this.$http({
          url: this.$http.adornUrl(`/sys/bdcregion/listByLevle`),
              method: 'get',
              params: this.$http.adornParams({'upregion':value})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.regionList = data.list
            }
        })
      }
      ,

      



      // 表单提交
      dataFormSubmit () {

        this.$refs['dataForm'].validate((valid) => {

          if (valid) {
            this.submitLoading = true

            this.$http({
              url: this.$http.adornUrl(`/bdc/bdcrealtylist/send`),
              method: 'post',
              data: this.$http.adornData({
                // 'djzx': this.dataForm.djzx,
                'region': this.dataForm.region,
                'bdczt': this.dataForm.bdczt,
                'dyqr': this.dataForm.orgid,
                'seRegion': this.dataForm.seRegion

              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
              this.submitLoading = false
            }).catch(err => {
                this.submitLoading = false;
                console.error(err);
                this.$message.error('系统异常')              
              });
          }
        })
      }
    }
  }
</script>
